<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    根据当前元素依赖于DOM之间的关系来查找所有的其他元素
    在下面的方法中，如果结果是多个DOM元素，那么我们都可以在方法中添加选择器参数，作为筛选条件，得到符合条件的jquery对象
    父子
      父->子
        父元素.children(选择器)
      子->父
        子元素.parent()
    
    相对定位的父元素
      offsetParent()
        <div>
          <p></p>
        </div>

        p {
          position: absolute;
        }
        div {
          postion: relative;
        }
    祖先后代
      祖先->后代
        祖先元素.find()
          可以找到该元素所有的后代元素，如果后代元素过多，造成性能浪费，因此直接调用find是不会有任何结果。需要写入选择器选择到对应的想要获取到的后代
          如果想要获取所有后代，使用"*"作为参数传入即可
      后代->祖先
        后代元素.parents()
          如果想要找到现有元素的祖先元素，就调用该方法
        后代元素.closest() 1.7之后不再建议使用
          直接调用该方法不会有任何结果，我们可以通过写入参数，来获取到想要得到祖先元素
        后代元素.parentsUntil(界限, 筛选选择器)


    同胞
      上->下
        上.next()
          该元素的下一个同胞元素
        上.nextAll()
          该元素下面所有的同胞元素
        上.nextUntil()
          该元素下面直到某元素结束的所有同胞元素
      下->上
        下.prev()
          该元素的上一个同胞元素
        下.prevAll()
          该元素的上面所有的同胞元素
        下.prevUntil()
          该元素上面面直到某个元素结束的所有同胞元素
      所有同胞
        元素.siblings()
          最常用 获取到该元素所有的同胞元素
   -->
  <ul>
    <li>1</li>
    <li>2</li>
    <li class="item"><span>3</span></li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script src="../libs/jquery-1.12.4.js"></script>
  <script>
    $(function () {
      // $('ul').children('.item').css('color', 'red')
      // $('.item').parent().css('listStyle', 'none')
      // console.log($("span").parents('ul'))
      // console.log($("span").parentsUntil('body', 'ul'))
      console.log($('ul').find('*'))


    })
  
  </script>
</body>
</html>